<template>
  <div class="wapper">
    <div class="search">
      <div class="search__back iconfont" @click="handleBack">&#xe6db;</div>
      <div class="search__box">
        <span class="search__box__icon iconfont">&#xe65c;</span>
        <input
          type="text"
          class="search__box__inp"
          placeholder="请输入商品名称搜索"
        />
      </div>
    </div>
    <ul class="list">
      <shop-info :item="item" :hiderBoder="true" v-if="item.imgUrl" />
    </ul>
    <Content :shopName="item.name" />
    <Cart />
  </div>
</template>

<script>
import ShopInfo from "../../components/shopInfo/ShopInfo.vue";
import { useRouter, useRoute } from "vue-router";
import { get } from "../../utils/request";
import { reactive, toRefs } from "vue";
import Content from "./ShopContent.vue";
import Cart from "./Cart.vue";
//获取当前商铺信息
const useShopInfoEffect = () => {
  const data = reactive({
    item: {},
  });
  const route = useRoute();
  const getItem = async () => {
    const result = await get(`api/shop/${route.params.id}`);
    if (result?.data?.errno === 0) {
      data.item = result.data.data;
    }
  };
  const { item } = toRefs(data);
  return { item, getItem };
};
//返回上层逻辑
const useBackRouterEffect = () => {
  const router = useRouter();
  const handleBack = () => {
    router.back();
  };
  return { handleBack };
};
export default {
  name: "shopPage",
  components: { ShopInfo, Content, Cart },
  setup() {
    const { item, getItem } = useShopInfoEffect();
    const { handleBack } = useBackRouterEffect();
    getItem();
    return { item, handleBack };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables.scss";
.wapper {
  padding: 0 0.18rem;
  .list {
    padding: 0;
    margin: 0;
  }
}
.search {
  display: flex;
  height: $shop-fontsize;
  margin-top: 0.16rem;
  margin-bottom: 0.04rem;
  &__back {
    width: 0.28rem;
    height: $shop-fontsize;
    line-height: $shop-fontsize;
    font-size: 0.24rem;
  }
  &__box {
    display: flex;
    height: $shop-fontsize;
    padding: 0 0.16rem;
    width: 100%;
    background-color: $search-bgColor;
    border-radius: 0.16rem;
    overflow: hidden;
    &__icon {
      display: block;
      height: $shop-fontsize;
      line-height: $shop-fontsize;
      text-align: center;
      color: #b7b7b7;
      font-size: 0.16rem;
    }
    &__inp {
      width: 100%;
      padding-left: 0.12rem;
      border: none;
      outline: none;
      background: none;
      font-size: 0.14rem;
      color: $content-fontcolor;
      &::placeholder {
        color: $content-fontcolor;
      }
    }
  }
}
</style>